<template>
  <div class="page_padding dailyManage">
    <MyNavBar @goback="goback" title="日常管理" />
    <van-tabs
      @click="onTabsClick"
      class="cont-tab"
      v-model="tabsActive"
      :sticky="true"
      line-width="35"
      line-height="2"
      title-active-color="#d80a06"
      title-inactive-color="#333333"
      border
      swipeable
      v-if="tabsList.length > 1">
      <van-tab v-for="tab in tabsList" :key="tab.id" :title="tab.name" :name="tab.id"></van-tab>
    </van-tabs>
    <div class="daily_con" v-if="pageShow">
      <logistics-manage v-if="tabsActive === '0'"></logistics-manage>
      <repair-manage v-if="tabsActive === '1'"></repair-manage>
      <expense-manage v-if="tabsActive === '2'"></expense-manage>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import LogisticsManage from './logistics/logisticsManage.vue'
import RepairManage from './repair/repairManage.vue'
import ExpenseManage from './expense/expenseManage'
export default {
  name: 'dailyManage',
  components: { LogisticsManage, RepairManage, ExpenseManage },
  props: {},
  data() {
    return {
      tabsActive: '0',
      tabsList: [
        { name: '物品领用', id: '0' },
        { name: '报修维修', id: '1' },
        { name: '出差报销', id: '2' },
      ],
      pageShow: false,
      userInfo: JSON.parse(localStorage.userInfo),
    }
  },
  watch: {},
  computed: {
    ...mapGetters('role', [
      'isOtherRole',
      'isNormalRole',
      'isOrgRole',
      'isPartRole',
      'isApplyRole',
      'isRepairRole',
      'isReimburseRole',
      'isBusinessRole',
      'isWeekendRole',
    ]),
  },
  methods: {
    onTabsClick(data) {
      this.$store.state.pageTabTwo = ''
      this.tabsActive = data
      this.$store.state.pageTab = this.$route.path + this.tabsActive
    },
    goback() {
      this.$store.state.pageTab = ''
      this.$router.go(-1)
    },
  },
  created() {
    const menu = []
    if (this.isOtherRole || this.isNormalRole || this.isOrgRole || this.isApplyRole) {
      menu.push({
        name: '物品领用',
        id: '0',
      })
    }
    if (this.isOtherRole || this.isNormalRole || this.isOrgRole || this.isRepairRole) {
      menu.push({
        name: '报修维修',
        id: '1',
      })
    }
    if (
      this.isOtherRole ||
      this.isNormalRole ||
      this.isOrgRole ||
      this.isPartRole ||
      this.isBusinessRole ||
      this.isReimburseRole
    ) {
      menu.push({
        name: '出差报销',
        id: '2',
      })
    }
    // console.log('menu :>> ', menu)
    this.tabsList = Array.from(new Set(menu.map(JSON.stringify))).map(JSON.parse)
    // console.log('this.tabsList :>> ', this.tabsList)
    if (this.$route.query.flag) {
      this.tabsActive = this.$route.query.flag
    } else {
      this.tabsActive = this.tabsList[0].id
    }
    const routeLength = this.$route.path.length
    if (this.$store.state.pageTab.substring(0, routeLength) === this.$route.path) {
      this.tabsActive = this.$store.state.pageTab.substring(this.$route.path.length)
    }
    this.pageShow = true
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
.dailyManage {
  height: 100%;
  position: relative;
  background-size: 100% 100%;
  font-size: 14px;
  .header-tabs {
    position: absolute;
    top: 48px;
    width: 100%;
    z-index: 10;
  }
  .daily_con {
    height: 100%;
  }
}
</style>
